<template>
  <div class="article-item">
  <nuxt-link :to="`/${articleType}/${article.id}`" class="article-link">
    <h2>{{ article.title }}</h2>
    <div class="meta">
      <span>作者: {{ article.author }}</span>
      <span>日期: {{ article.date }}</span>
    </div>
    <p>{{ article.summary }}</p>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: "ArticleItem",
  props: {
    article: {
      type: Object,
      required: true,
    },
    articleType: {
      type: String,
      required: true,
    },
  },
};
</script>

<style>

.article-item {
  margin-bottom: 30px;
  padding: 15px 20px;
  margin: 20px;
  border-bottom: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.article-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.article-link {
  text-decoration: none;
  color: inherit;

}

.article-item h2 {
  margin-top: 0;
  color: #2c3e50;
}

.meta {
  color: #7f8c8d;
  margin: 10px 0;
  font-size: 0.9em;
}

.meta span {
  margin-right: 15px;
}
</style>
